<template>
  <view class="register-container">
    <!-- 主注册表单 -->
    <view class="register-form">
      <!-- 标题区域 -->
      <view class="title-section">
        <text class="main-title">注册账号</text>
      </view>

      <!-- 输入区域 -->
      <view class="input-section">
        <!-- 手机号输入框 -->
        <view class="input-group">
          <input
            v-model="phoneNumber"
            placeholder="请输入手机号"
            class="input-field"
            type="number"
            maxlength="11"
          />
        </view>

        <!-- 验证码输入框 -->
        <view class="input-group">
          <input
            v-model="verificationCode"
            placeholder="请输入验证码"
            class="input-field"
            type="number"
            maxlength="6"
          />
          <text
            class="get-code-btn"
            @click="getVerificationCode"
            :class="{ disabled: countdown > 0 }"
          >
            {{ countdown > 0 ? `${countdown}s` : '获取验证码' }}
          </text>
        </view>

        
      </view>
      <view style="height: 40rpx"> </view>

      <!-- 完成按钮 -->
      <button class="complete-button" @click="handleRegister" :disabled="!isFormValid">
        完成
      </button>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { ref, computed } from 'vue'
  import { useRequest } from '@/api'
  import { TokenManager } from '@/utils/token'
  import { UserInfoManager } from '@/utils/userInfo'
  import { useOutsideAppStore } from '@/store/app'

  const { API_SMS_SEND, API_MOBILELOGIN_POST } = useRequest()
  const appStore = useOutsideAppStore()

  // 响应式数据
  const phoneNumber = ref('')
  const verificationCode = ref('')
  const countdown = ref(0)

  // 表单验证（手机号 + 验证码）
  const isFormValid = computed(() => {
    return phoneNumber.value && verificationCode.value
  })

  // 获取验证码
  async function getVerificationCode() {
    if (!phoneNumber.value) {
      uni.showToast({ title: '请输入手机号', icon: 'none' })
      return
    }

    if (!/^1[3-9]\d{9}$/.test(phoneNumber.value)) {
      uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
      return
    }

    if (countdown.value > 0) {
      return
    }

    try {
      uni.showLoading({ title: '发送中...' })
      const params = { mobile: phoneNumber.value, event: 'mobilelogin' }
      const res = await API_SMS_SEND(params)
      if (res.code === 1) {
        uni.showToast({ title: '验证码已发送', icon: 'success' })
        countdown.value = 60
        const timer = setInterval(() => {
          countdown.value--
          if (countdown.value <= 0) {
            clearInterval(timer)
          }
        }, 1000)
      }
    } catch (error) {
     
    } finally {
      uni.hideLoading()
    }
  }

  // 注册即登录（手机号验证码）
  async function handleRegister() {
    if (!phoneNumber.value) {
      uni.showToast({ title: '请输入手机号', icon: 'none' })
      return
    }
    if (!/^1[3-9]\d{9}$/.test(phoneNumber.value)) {
      uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
      return
    }
    if (!verificationCode.value) {
      uni.showToast({ title: '请输入验证码', icon: 'none' })
      return
    }
 

    try {
      uni.showLoading({ title: '提交中...' })
      const params = { mobile: phoneNumber.value, captcha: verificationCode.value }
      const res = await API_MOBILELOGIN_POST(params)
      if (res.code === 1) {
        TokenManager.setToken(res.data.token)
        UserInfoManager.setUserInfo(res.data.userinfo)
        appStore.setUserInfo(res.data.userinfo)
        if (res.data.userinfo.isdriver === 1) {
          uni.reLaunch({ url: '/driver/orderHall/index' })
        } else {
          uni.reLaunch({ url: '/user/home/index' })
        }
      } 
    } catch (error) {
      
    } finally {
      uni.hideLoading()
    }
  }
</script>

<style scoped>
  .register-container {
    min-height: 100vh;
    background: #fff;
    padding: 40rpx 60rpx;
    position: relative;

  }

  /* 主注册表单 */
  .register-form {
    margin-top: 120rpx;
  }

  /* 标题区域 */
  .title-section {
    margin-bottom: 80rpx;
  }

  .main-title {
    display: block;
    font-size: 48rpx;
    font-weight: bold;
    color: #333;
  }

  /* 输入区域 */
  .input-section {
    margin-bottom: 60rpx;
  }

  .input-group {
    position: relative;
    margin-bottom: 40rpx;
    background: #f5f5f5;
    border-radius: 12rpx;
    padding: 0 24rpx;
    height: 88rpx;
    display: flex;
    align-items: center;
  }

  .input-field {
    flex: 1;
    height: 100%;
    font-size: 32rpx;
    background: transparent;
    border: none;
    outline: none;
  }

  .get-code-btn {
    color: #ff6b35;
    font-size: 28rpx;
    margin-left: 20rpx;
    white-space: nowrap;
  }

  .get-code-btn.disabled {
    color: #999;
  }

  /* 协议同意区域 */
  .agreement-section {
    margin-bottom: 60rpx;
  }

  .agreement-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  .checkbox {
    width: 32rpx;
    height: 32rpx;
    border-radius: 50%;
    border: 2rpx solid #ff6b35;
    margin-right: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
  }

  .checkbox.checked {
    background: #ff6b35;
  }

  .checkbox-dot {
    width: 16rpx;
    height: 16rpx;
    border-radius: 50%;
    background: #fff;
  }

  .agreement-text {
    font-size: 28rpx;
    color: #333;
    margin-right: 8rpx;
  }

  .agreement-link {
    font-size: 28rpx;
    color: #ff6b35;
    margin-right: 8rpx;
  }

  /* 完成按钮 */
  .complete-button {
    width: 100%;
    height: 88rpx;
    background: #ff6b35;
    color: #fff;
    font-size: 32rpx;
    border-radius: 12rpx;
    border: none;
  }

  .complete-button:disabled {
    background: #ccc;
  }
</style>
